<template>
	<view class="page">
		<view class="list" v-for="(item, index) in recordData" :key="index" v-if="recordData.length > 0">
			<view class="title">
				<text>车牌号 {{filterNull(item.carPlantNo)}}</text>
				<view class="time">{{item.processingStatusStr}}</view>
			</view>
			<view class="list_content">
				<view class="list_item">
					<text>品牌/车系/车型：</text>
					<text>{{filterNull(item.carBrandSeriesModeName)}}</text>
				</view>
				<view class="list_item">
					<text>违章类型：</text>
					<text>{{filterNull(item.illegalTypeStr)}}</text>
				</view>
				<view class="list_item">
					<text>违章地点：</text>
					<text>{{filterNull(item.illegalLocation)}}</text>
				</view>
				<view class="list_item">
					<text>违章时间：</text>
					<text>{{filterNull(item.illegalTime)}}</text>
				</view>
				<view class="list_item">
					<text>{{ item.processingStatus === 2 ? '处理时间：' : '更新时间：' }}</text>
					<text>{{filterNull(item.updateTime)}}</text>
				</view>
			</view>

			<view class="points">

				<text class="points-text">扣</text>
				<text class="points-value">{{item.pointsDeduction + "分"}}</text>
				<text class="points-text" style="margin-left: 20upx;">罚</text>
				<text class="points-value">{{item.illegalFines + "元"}}</text>

			</view>


			<view class="hint" v-if="item.processingStatus===0">
				
				<image src="@/static/home/prompt@2x.png" mode="widthFix"></image>
				<text>如果是个人已处理，请及时联系平台</text>
			</view>
		</view>
		
		<no-data v-if="recordData.length === 0" content="这里空空如也，木有违章"></no-data>

		<u-loadmore :status="loadingStatus" v-if="showloading" @loadmore="clickloadmore"></u-loadmore>

	</view>
</template>

<script>
	import {
		getIllegalInfor
	} from '../../../../common/api.js';
	

	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				showloading: false,
				loadingStatus: 'loading',
				recordData: [
					// {
					// 	carPlantNo: '陕A12312',
					// 	processingStatusStr: 'FGERGSDFD',
					// 	carBrandSeriesModeName: '6体贴他人他突然',
					// 	illegalTypeStr: '刚刚发发给',
					// 	illegalLocation: '刚好今天又要突然',
					// 	// illegalTime:'789087690789',
					// 	processingStatus: 2,
					// 	updateTime: '9789789789',
					// 	pointsDeduction: '567',
					// 	illegalFines: '555',
					// 	processingStatus: 0

					// },
					// {
					// 	carPlantNo: '陕A123121212',
					// 	processingStatusStr: 'FGERGSDFD',
					// 	carBrandSeriesModeName: '6体贴他人66他突然',
					// 	// illegalTypeStr:'地方豆腐干反对',
					// 	// illegalLocation:'刚好反对法地方今天又6767要突然',
					// 	// illegalTime:'78908d6578677690789',
					// 	processingStatus: 2,
					// 	updateTime: '9789786669789',
					// 	pointsDeduction: '567566',
					// 	illegalFines: '556665',
					// }
				]
			}
		},

		onLoad() {
			this.getData()
		},

		methods: {
			getData() {
				getIllegalInfor({
					pageNo: this.pageNo,
					pageSize: this.pageSize,

				}).then(res => {
					if (this.pageNo == 1) {
						this.recordData = [];
						this.pageNo++;
						uni.stopPullDownRefresh();

						this.showloading = false;
						this.loadingStatus = 'loadmore';

					} else {
						if (!uni.$u.test.isEmpty(res)) {
							this.pageNo++;

							this.showloading = false;
							this.loadingStatus = 'loadmore';
						} else {
							this.showloading = true;
							this.loadingStatus = 'nomore';
						}
					}

					if (!uni.$u.test.isEmpty(res)) {
						this.recordData = this.recordData.concat(res);
					}
				})
			},
			
			clickloadmore() {
				this.getData();
				this.showloading = true;
				this.loadingStatus = 'loading';
			},
		},

		onPullDownRefresh() {
			this.pageNo = 1;
			this.getData();
		},

		onReachBottom() {
			this.getData();
			this.showloading = true;
			this.loadingStatus = 'loading';
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		box-sizing: border-box;
		padding: 20upx 24upx 0;
	}

	.list {
		background: white;
		border-radius: 16upx;
		padding: 0 14upx 10upx;
		margin-bottom: 20upx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30upx 0;
	}

	.title text,
	.title view {
		font-family: PingFang-SC-Bold;
		font-weight: bold;
		font-size: 32upx;
	}

	.time {
		color: #FFC000;
	}

	.list_content {
		padding: 14upx 0;
		border-top: 1px dashed #EFEFEF;
		border-bottom: 1px dashed #EFEFEF;
	}

	.list_content .list_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 14upx 0;
	}

	.list_content .list_item text:nth-child(1) {
		font-size: 24upx;
		color: #A7A7A7;
	}

	.list_content .list_item text:nth-child(2) {
		font-size: 24upx;
	}

	.points {
		display: inline-flex;
		align-items: center;
		width: auto;
		height: 42upx;
		margin: 16upx 0;
		border-radius: 10upx;
		padding: 0 10upx;
		font-size: 24upx;
		border: solid #FFC500 1.6upx;
		background-color: #FFF4CC;

		.points-text {
			color: #FFFFFF;
			border-radius: 8upx;
			background-color: #FFC500;
			padding: 0upx 4upx;
		}

		.points-value {
			color: #FFC500;
			margin-left: 4upx;
		}
	}

	.hint {
		display: flex;
		align-items: center;
		padding-bottom: 30upx;
	}

	.hint image {
		width: 30upx;
		height: 30upx;
		margin-right: 10upx;
	}

	.hint text {
		color: #E93131;
		font-size: 24upx;
	}

	.no_content {
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		margin-top: 390upx;
	}

	.no_content image {
		width: 190upx;
		height: 174upx;
	}

	.no_content text {
		font-size: 28upx;
		color: #C5D3E8;
		margin-top: 12upx
	}
</style>
